<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1_插值</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <!-- 
        当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新 为新的值。
        当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
        例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
      -->

      <!-- 使用“Mustache”语法 (双大括号) 的文本插值 -->
      <p><span>Message: {{ message }}</span></p>
      <p><span>Using mustache: {{ rawHtml }}</span></p>

      <!-- 如果输出真正的 HTML，需要使用 v-html 指令 -->
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>

      <!-- Vue.js 提供了 JavaScript 的支持 -->
      <p><span>{{ number + 1 }}</span></p>
      <p><span>{{ ok ? 'YES' : 'NO' }}</span></p>
      <p><span>{{ message.split('').reverse().join() }}</span></p>

      <!-- 这是语句，不是表达式 -->
      <!-- <p><span>{{ var a = 1 }}</span></p> -->
      <!-- 流控制也不会生效，请使用三元表达式 -->
      <!-- <p><span>{{ if (ok) { return message } }}</span></p> -->
      
    </div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
      el: "#app",
      data: {
        message: "Hello Vue",
        rawHtml: '<span style="color: red">This should be red.</span>',
        number: 110,
        ok: true,
      },
    });
  </script>
</html>
